<template>
  <div class="userInformation">
    <div class="userItemLogin" :class="{'userItemShadow': loginVal.pawTrue}">
      <div class="userItemLTitle" @click="userInfoEvent(0)">
        <section class="userName">
          <p>登录密码</p>
          <p>定期更换密码，让您的账号更加安全</p>
        </section>
        <section class="userStatus">
          <p>{{loginVal.pawName}}</p>
        </section>
      </div>
      <div class="userItemLInput" v-if="loginVal.pawTrue">
        <ul>
          <li>
            <article class="userItemArticle  displayFlex">
              <section>旧密码</section>
              <section>
                <Input type="password" v-model="loginVal.oldPaw" placeholder="旧密码输入必须在6~12位" :maxlength='maxLength'
                       style="width: 300px"></Input><br/>
              </section>
            </article>
          </li>
          <li>
            <article class="userItemArticle  displayFlex">
              <section>新密码</section>
              <section>
                <Input type="password" v-model="loginVal.newPaw" placeholder="新密码输入必须在6~12位" :maxlength='maxLength'
                       style="width: 300px"></Input><br/>
              </section>
            </article>
          </li>
          <li>
            <article class="userItemArticle  displayFlex">
              <section>确认密码</section>
              <section>
                <Input type="password" v-model="loginVal.againPaw" placeholder="请再次输入密码" :maxlength='maxLength'
                       style="width: 300px"></Input><br/>
              </section>
            </article>
          </li>
        </ul>
        <div class="userItemBtn" @click="signInEntry">
          <a href="javascript:void(0)">确定修改</a>
        </div>
      </div>
    </div>
    <div class="userItemLogin" :class="{'userItemShadow': transVal.pawTrue}">
      <div class="userItemLTitle" @click="userInfoEvent(1)">
        <section class="userName userJYName">
          <p>交易密码</p>
          <p>定期更换密码，让您的账号更加安全</p>
        </section>
        <section class="userStatus">
          <p>{{transVal.pawName}}</p>
        </section>
      </div>
      <div class="userItemLInput" v-if="transVal.pawTrue">
        <ul>
          <li>
            <article class="userItemArticle  displayFlex">
              <section>手机号</section>
              <section class="sectionCall">{{userMessage.phone?_Filter.phoneFormate(userMessage.phone):'手机号未绑定,请先绑定'}}</section>
            </article>
          </li>
          <li>
            <article class="userItemArticle  displayFlex">
              <section>验证码</section>
              <section class="userItemPosition">
                <Input v-model="transVal.traVal" placeholder="请输入验证码" style="width: 300px"></Input><br/>
                <div class="userItemTextV" @click="verifyingSetTime">{{verifyingName}}</div>
              </section>
            </article>
          </li>
          <li>
            <article class="userItemArticle  displayFlex">
              <section>新密码</section>
              <section>
                <Input type="password" v-model="transVal.newPaw" placeholder="新密码输入必须在6~12位" :maxlength='maxLength'
                       style="width: 300px"></Input><br/>
              </section>
            </article>
          </li>
          <li>
            <article class="userItemArticle  displayFlex">
              <section>确认密码</section>
              <section>
                <Input type="password" v-model="transVal.againPaw" placeholder="请再次输入密码" :maxlength='maxLength'
                       style="width: 300px"></Input><br/>
              </section>
            </article>
          </li>
        </ul>
        <div class="userItemBtn" @click="userSetUpEvent">
          <a href="javascript:void(0)">确定修改</a>
        </div>
      </div>
    </div>
    <div class="userItemLogin" :class="{'userItemShadow': bindPhoneNum.pawTrue}">
      <div class="userItemLTitle" @click="userInfoEvent(2)">
        <section class="userName callJYName">
          <p>手 机 号</p>
          <p>{{userMessage.phone?_Filter.phoneFormate(userMessage.phone):"您的手机未绑定，请尽快绑定"}}</p>
        </section>
        <section class="userStatus">
          <p>{{bindPhoneNum.pawName}}</p>
        </section>
      </div>
      <div class="userItemLInput" v-if="bindPhoneNum.pawTrue&&!userMessage.phone">
        <ul>
          <li>
            <article class="userItemArticle  displayFlex">
              <section>手机号</section>
              <section>
                <input type="text" v-model="bindPhoneNum.phone" :maxlength='maxLength' placeholder="请输入手机号"
                       class="inputWith"><br/>
              </section>
            </article>
          </li>
          <li>
            <article class="userItemArticle  displayFlex">
              <section>验证码</section>
              <section class="userItemPosition">
                <Input v-model="bindPhoneNum.authCode" placeholder="请输入验证码" style="width: 300px"></Input><br/>
                <div class="userItemTextV" @click="verifyingSetTime">{{verifyingName}}</div>
              </section>
            </article>
          </li>
        </ul>
        <div class="userItemBtn" @click="bindPhoneEvent">
          <a href="javascript:void(0)">确定绑定</a>
        </div>
      </div>
      <div class="userItemLInput" v-if="bindPhoneNum.pawTrue&&userMessage.phone">
        <ul>
          <li>
            <article class="userItemArticle  displayFlex">
              <section>手 机 号</section>
              <section class="sectionCall">{{_Filter.phoneFormate(userMessage.phone)}}</section>
            </article>
          </li>
          <li>
            <article class="userItemArticle displayFlex">
              <section>如需更换,请</section>
              <section>
                <a :href="_Api.customerLink" target="_blank" class="customer">联 系 客 服</a>
              </section>
            </article>
          </li>
        </ul>
      </div>
    </div>
    <div class="userItemLogin" :class="{'userItemShadow': bankCardManerge.pawTrue}">
      <div class="userItemLTitle" @click="userInfoEvent(3)">
        <section class="userName cardedJYName">
          <p>银行卡管理</p>
          <p>{{isBindCard?'银行卡已绑定，点击查看详细信息':'您的银行卡未绑定，请尽快绑定'}}</p>
        </section>
        <section class="userStatus">
          <p>{{bankCardManerge.pawName}}</p>
        </section>
      </div>
      <div v-if="isBindCard">
        <div class="userItemLInput" v-show="bankCardManerge.pawTrue">
          <bankCardManerge></bankCardManerge>
        </div>
      </div>
      <div v-else>
        <div class="userItemLInput" v-if="bankCardManerge.pawTrue">
          <bankCardManerge></bankCardManerge>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import './main.scss';
  import {mapState} from 'vuex';
  import bankCardManerge from '../bankCard/index.vue'
  export default {
    data() {
      return {
        userInfoJSON: {
          login: '修改',
          trans: '未设置',
          card: '未绑定',
          call: '未绑定'
        },
        //登录密码数据
        loginVal: {
          oldPaw: '',
          newPaw: '',
          againPaw: '',
          pawTrue: false,
          pawName: '修改'
        },
        //交易密码数据
        transVal: {
          traVal: '',
          newPaw: '',
          againPaw: '',
          pawTrue: false,
          pawName: '未设置'
        },
        //绑定手机号数据
        bindPhoneNum: {
          phone: '',
          authCode: '',
          pawTrue: false,
          pawName: '未绑定'
        },
        //银行卡管理
        bankCardManerge: {
          pawTrue: false,
          pawName: '未绑定'
        },
        //验证码发送类型
        authCodeType: '',
        //秒数
        countdown: 60,
        verifyingName: '点击获取验证码',
        thatSetInter: '',
        maxLength: 12,
        userMessage: {},//用户信息
        authCodeLock: false,//发送验证码的锁
        isBindCard: false,
        thisIndex: '-1',
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.mutations.userInformation, //用户信息
      })
    },
    mounted() {},
    activated() {
      this.init();
    },
    deactivated() {
      this.initStatus();
    },
    methods: {
      initStatus() {
        this.loginVal = {
          oldPaw: '',
          newPaw: '',
          againPaw: '',
          pawTrue: false,
          pawName: this.userInfoJSON.login
        };
        this.transVal = {
          traVal: '',
          newPaw: '',
          againPaw: '',
          pawTrue: false,
          pawName: this.userInfoJSON.trans
        };
        this.bindPhoneNum = {
          phone: '',
          authCode: '',
          pawTrue: false,
          pawName: this.userInfoJSON.card
        };
        this.bankCardManerge = {
          pawTrue: false,
          pawName: this.userInfoJSON.call
        };
        this.countdown = 60;
        this.verifyingName = '点击获取验证码';
        this.authCodeLock = false;
        clearInterval(this.thatSetInter);
      },
      init() {
        this.userInfoEvent(this.$route.query.type||this.thisIndex);
      },
      modifyPassword(index) {
        let that = this;
        switch (parseInt(index)) {
          case 2:
            that.$router.push({name: 'modifyPassword', query: {perIndex: 3}});
            break;
        }
      },
      userInfoEvent(index) {
        let that = this;
        that.clearData();
        if (that.userInfo.memberInfo) {
          that.userMessage = that.userInfo.memberInfo;
          that.userInfoJSON.call = that.userMessage.phone ? '已绑定' : '未绑定';
          that.isBindCard = that.userMessage.isBindBankCard ? that.userMessage.isBindBankCard : false;
          that.userInfoJSON.card = that.isBindCard ? '已绑定' : '未绑定';
          that.userInfoJSON.trans = that.userMessage.isSetPay ? '修改' : '未设置';
        }
        index = parseInt(index);
        if (index == '0') {
          that.loginVal.pawTrue = that.loginVal.pawTrue ? false : true;
          that.loginVal.pawName = that.loginVal.pawTrue ? '取消' : that.userInfoJSON.login;
          that.transVal.pawName = that.userInfoJSON.trans;
          that.transVal.pawTrue = false;
          that.bindPhoneNum.pawName = that.userInfoJSON.call;
          that.bindPhoneNum.pawTrue = false;
          that.bankCardManerge.pawName = that.userInfoJSON.card;
          that.bankCardManerge.pawTrue = false;
        } else if (index == '1') {
          that.transVal.pawTrue = that.transVal.pawTrue ? false : true;
          that.transVal.pawName = that.transVal.pawTrue ? '取消' : that.userInfoJSON.trans;
          that.authCodeType = 1;
          that.loginVal.pawTrue = false;
          that.loginVal.pawName = that.userInfoJSON.login;
          that.bindPhoneNum.pawName = that.userInfoJSON.call;
          that.bindPhoneNum.pawTrue = false;
          that.bankCardManerge.pawName = that.userInfoJSON.card;
          that.bankCardManerge.pawTrue = false;
        } else if (index == '2') {
          that.bindPhoneNum.pawTrue = that.bindPhoneNum.pawTrue ? false : true;
          that.bindPhoneNum.pawName = that.bindPhoneNum.pawTrue ? '取消' : that.userInfoJSON.call;
          that.authCodeType = 2;
          that.transVal.pawName = that.userInfoJSON.trans;
          that.transVal.pawTrue = false;
          that.loginVal.pawTrue = false;
          that.loginVal.pawName = that.userInfoJSON.login;
          that.bankCardManerge.pawName = that.userInfoJSON.card;
          that.bankCardManerge.pawTrue = false;
        } else if (index == '3') {
          that.bankCardManerge.pawTrue = that.bankCardManerge.pawTrue ? false : true;
          that.bankCardManerge.pawName = that.bankCardManerge.pawTrue ? '取消' : that.userInfoJSON.card;
          that.transVal.pawName = that.userInfoJSON.trans;
          that.transVal.pawTrue = false;
          that.loginVal.pawTrue = false;
          that.loginVal.pawName = that.userInfoJSON.login;
          that.bindPhoneNum.pawName = that.userInfoJSON.call;
          that.bindPhoneNum.pawTrue = false;
        }
      },
      //设置登录密码-校验
      signInEntry() {
        let that = this;
        if (!that.loginVal.oldPaw || that.loginVal.oldPaw.length < 6 || that.loginVal.oldPaw.length > 12) {
          that._Util.showAlert('原密码输入有误');
          return;
        }
        if (!that.loginVal.newPaw || that.loginVal.newPaw.length < 6 || that.loginVal.newPaw.length > 12) {
          that._Util.showAlert('请输入6-12位新密码');
          return;
        }
        if (that.loginVal.newPaw == that.loginVal.oldPaw) {
          that._Util.showAlert('旧密码与新密码不能输入一致');
          return;
        }
        if (that.loginVal.againPaw !== that.loginVal.newPaw) {
          that._Util.showAlert('俩次密码输入不一致');
          return;
        }
        that.signInEntryEvent(that.loginVal.oldPaw, that.loginVal.newPaw);
      },
      //设置登录密码-发送接口
      signInEntryEvent(oldPaw, newPaw) {
        let that = this;
        that._Util.post(that, that._Api.POST_EDIT_PASSWORD_DATA, {
          oldPassword: that._Util.hexMd5(oldPaw),
          newPassword: that._Util.hexMd5(newPaw)
        }, (data, dataOld) => {
          if (parseInt(dataOld.code) === -1) {
            that._Util.showAlert(dataOld.msg);
            return;
          }
          that._Util.showAlert('密码修改成功~');
          that.clearData();
        },'','post')
      },
      //确认绑定手机号
      bindPhoneEvent() {
        let that = this;
        if (that.bindPhoneNum.phone == '' || !that._Util.isPhoneNumber(that.bindPhoneNum.phone)) {
          that._Util.showAlert("手机号码格式不正确");
          return;
        }
        if (that.bindPhoneNum.authCode == "") {
          that._Util.showAlert("验证码输入不能为空");
          return;
        }
        let params = {
          phone: that.bindPhoneNum.phone || '',
          code: that.bindPhoneNum.authCode || ''
        };
        that._Util.post(that, that._Api.POST_BIND_PHONE, params, (data, dataAll) => {
          that._Util.showAlert(dataAll.msg);
          that.$parent.$refs.personalHeader.theUserInForm();
          that.clearData();
        },'','post');
      },
      //确认修改提现密码
      userSetUpEvent() {
        let that = this;
        if (!that.transVal.traVal || that.transVal.traVal.length < 4) {
          that._Util.showAlert('验证码输入有误');
          return;
        }
        if (!that.transVal.newPaw || that.transVal.newPaw.length < 6 || that.transVal.newPaw.length > 12) {
          that._Util.showAlert('请输入6-12位新密码');
          return;
        }
        if (that.transVal.againPaw !== that.transVal.newPaw) {
          that._Util.showAlert('两次密码输入不一致');
          return;
        }
        let params = {
          code: that.transVal.traVal,
          phone: this.userMessage.phone,
          payPassword: that._Util.hexMd5(that.transVal.newPaw)
        }
        that._Util.post(that, that._Api.POST_SET_WITHDRAW_PASSWORD, params, (data, dataAll) => {
          that._Util.showAlert(dataAll.msg);
          that.$parent.$refs.personalHeader.theUserInForm();
          that.clearData();
        },'','post');
      },
      //发送验证码
      verifyingCode() {
        let that = this;
        if (that.countdown === 0) {
          that.verifyingName = '点击获取验证码';
          that.countdown = 60;
          clearInterval(that.thatSetInter);
          that.authCodeLock = false;
        } else {
          that.verifyingName = '重新发送' + that.countdown;
          that.countdown--;
        }
      },
      //获取验证码
      verifyingSetTime() {
        let that = this;
        let params;
        if (that.authCodeType == '2') {
          if (that.bindPhoneNum.phone == '' || !that._Util.isPhoneNumber(that.bindPhoneNum.phone)) {
            that._Util.showAlert("手机号码格式不正确");
            return;
          }
          params = {
            phone: this.bindPhoneNum.phone,
          };
        }
        if (that.authCodeType == '1') {
          if (that.userMessage.phone == '') {
            that._Util.showAlert("请先绑定手机号");
            return;
          }
          params = {
            phone: this.userMessage.phone,
          };
        }

        if (that.authCodeLock) return false;
        that.authCodeLock = true;
        that._Util.post(that, that._Api.POST_SEND_CODE_DATA, params, (data, dataAll) => {
          that._Util.showAlert(dataAll.msg);
          that.getAuthCodeText();
        }, () => {
          that.authCodeLock = false;
        })
      },
      //验证码倒计时
      getAuthCodeText() {
        let that = this;
        clearInterval(that.thatSetInter);
        that.thatSetInter = setInterval(function () {
          that.verifyingCode();
        }, 1000);
      },
      //清空数据
      clearData() {
        let that = this;
        that.transVal.newPaw = '';
        that.transVal.againPaw = '';
        that.transVal.traVal = '';
        that.loginVal.oldPaw = '';
        that.loginVal.newPaw = '';
        that.loginVal.againPaw = '';
        that.bindPhoneNum.phone = '';
        that.bindPhoneNum.authCode = '';
        this.countdown = 60;
        this.verifyingName = '点击获取验证码';
        this.authCodeLock = false;
        clearInterval(this.thatSetInter);
      }
    },
    components: {
      bankCardManerge,
    },
    watch: {
      '$route.query.perIndex'(val) {
        this.init();
      },
      'userInfo'(val) {
        this.userMessage = this.userInfo.memberInfo;
        this.isBindCard = this.userMessage.isBindBankCard ? this.userMessage.isBindBankCard : false;
        this.init();
      },
      'bindPhoneNum.phone'(val) {
        this.bindPhoneNum.phone = val.replace(/[^0-9]/g, '');
      }
    }
  }
</script>

<style lang="css" rel="styleheet/css" scoped>

</style>
